<template>
  <div class="avatar-container">
    <el-card>
      <Bread first="个人中心" second="更改头像"></Bread>
      <div class="avatar-box">
        <img :src="userImg || defaultImg" alt="" />
      </div>
      <!-- 按钮 -->
      <div class="btns">
        <!-- 文件选择框 -->
        <input
          type="file"
          accept="image/*"
          style="display: none"
          ref="fileRef"
          @change="chooseInp"
        />
        <el-button type="primary" icon="el-icon-plus" @click="chooseBtn"
          >选择图片</el-button
        >
        <el-button
          type="success"
          icon="el-icon-upload"
          :disabled="isDisabled"
          @click="updateImg"
          >上传头像
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
// 导入默认图片
import defaultImg from '../../assets/images/avatar.jpg'
import { mapState, mapActions } from 'vuex'
import { updateUserAvatarApi } from '../../api/user'
export default {
  name: '',
  data () {
    return {
      // 上传按钮是否被禁用
      isDisabled: true,
      userImg: '',
      defaultImg: defaultImg
    }
  },
  created () {
    setTimeout(() => {
      this.userImg = this.userInfo.user_pic
    }, 800)
  },
  computed: {
    ...mapState('user', ['userInfo'])
  },
  methods: {
    ...mapActions('user', ['AgetUserInfo']),
    // 选中图片
    chooseBtn () {
      // 隐藏域点击
      this.$refs.fileRef.click()
    },
    // 选择头像
    chooseInp (e) {
      var file = e.target.files[0]
      // 1.如果用户没有选中图像
      if (file.length <= 0) return this.$message.warning('请选择图片!')
      // 2.限制图片大小
      if (file.size / 1024 / 1024 > 1.5) {
        return this.$message.warning('图像大小不能超过1.5M')
      }
      // 3. 处理base64格式图片 回显
      //  3.1 使用fileReader文件读取对象 处理base64格式
      const fr = new FileReader()
      console.log(fr) // 打印查看FileReader的属性和方法
      fr.readAsDataURL(file) // 使用readAsDataURL方法读取文件
      // 监听什么时候读取完毕
      fr.addEventListener('load', () => {
        this.userImg = fr.result
        // 启用上传按钮
        this.isDisabled = false
      })
    },
    // 上传头像
    async updateImg () {
      if (this.userImg) {
        const res = await updateUserAvatarApi(this.userImg)
        console.log(res)
        if (res.data.code === 0) {
          this.$message.success(res.data.message)
        }
        // 修改成功之后更新页面
        this.AgetUserInfo()
        // 将上传图片按钮禁用
        this.isDisabled = true
      }
    }
  }
}
</script>
<style lang='less'  scoped>
.avatar-container {
  text-align-last: left;
}
.avatar-box {
  img {
    width: 350px;
    height: 350px;
    object-fit: cover;
    margin: 20px 0;
  }
}
</style>
